<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :before-close="handleClose"
    size="40%"
  >
    <div class="demo-drawer__content">
      <el-form ref="addForm" :model="formData" :rules="rules" inline class="demo-ruleForm" label-position="top">
        <el-form-item prop="community_code" label="所属小区">
          <el-select v-model="formData.community_code" placeholder="请选择">
            <el-option v-for="item in mm" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="链接内容" prop="link">
          <el-input v-model="formData.link" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="type" label="广告位置">
          <el-select v-model="formData.type" placeholder="请选择">
            <el-option v-for="(item,index) in option" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="formData.remark" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="启用状态">
          <el-radio v-model="formData.status" :label="nmn.one">禁用</el-radio>
          <el-radio v-model="formData.status" :label="nmn.two">启用</el-radio>
        </el-form-item>
        <el-row>
          <el-form-item label="图片内容">
            <uploadImg ref="uploadUmage" :seeimage2="seeimage1" @removeUrl="removeUrl" @pushImage="pushImage" />
          </el-form-item>
        </el-row>

      </el-form>
    </div>
    <div class="ppt" />
    <div class="demo-drawer__footer">
      <el-button @click="quxiao">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { getCommunityListApi, addAdvPosInfoApi, getPutApi } from '@/api/content_adv'
export default {
  components: {
  },
  props: {
    seeimage1: {
      type: Array,
      default: () => []
    },
    drawer: Boolean
  },
  data() {
    return {
      nmn: {
        one: 2,
        two: 1
      },

      imgList: [],
      option: [
        { label: 'PC端轮播图', value: 2 },
        { label: '移动端轮播图', value: 1 }
      ],
      mm: [],
      formData: {
        community_code: '',
        link: '',
        name: '',
        pic_url: '',
        remark: '',
        status: 1,
        type: ''
      },
      rules: {
        link: [{ required: true, message: '请输入', trigger: 'blur' }],

        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        community_code: [{ required: true, message: '请输入', trigger: 'blur' }],

        type: [{ required: true, message: '请输入', trigger: 'blur' }]

      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改广告信息' : '新增广告信息'
    }
  },
  created() {
    this.initData1()
  },
  methods: {
    handleClose() {
      this.formData = {
        community_code: '',
        link: '',
        name: '',
        pic_url: '',
        remark: '',
        status: 1,
        type: ''
      }
      this.imgList = []
      this.$refs.uploadUmage.fileList = []
      this.$emit('clearImgList')
    },
    async initData1() {
      const res = await getCommunityListApi()
      console.log('res:', res)
      this.mm = res.data.data
    },
    quxiao() {
      this.handleClose()
    },
    pushImage(url) {
      this.imgList.push(url)
    },
    async onSubmit() {
      console.log(this.formData)
      await this.$refs.addForm.validate()
      this.formData.pic_url = this.imgList.join(',')
      this.formData.id ? await getPutApi(this.formData, this.formData.id) : await addAdvPosInfoApi(this.formData)
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      this.handleClose()
      this.$emit('updateList')
    },
    removeUrl(url) {
      console.log(url)
      this.imgList = this.imgList.filter(item => url !== item)
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  margin-bottom: 0;
  padding: 20px 20px 20px 80px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  .el-drawer__close-btn{
  position: absolute;
  left: 20px;
}
}
::v-deep .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;

    overflow: auto;

    position: relative;
    .el-form-item__label{
      padding-bottom: 0;
    }
    .demo-drawer__content{
      padding: 24px;
    }
    .el-input__inner{
     width: 285px;
    }
    .el-form-item{
      margin-right: 65px;
    }
.ppt{
  height: 1px;
  width: 100%;
  background-color: #f0f0f0;
}
  }
  .demo-drawer__footer{
  float: right;
  margin-right: 30px;
  margin-top: 20px;
}
</style>
